<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div>3111111</div>
    <script src="../框架相关的js/vue.js"></script>
    <div id="app">
        <div :id="'list-'+id">
            112222222222
        </div>
        <!-- 动态属性名和属性值     key和value都是动态的 -->
        <div :[ma]="titlevalue">
            我是一个标题
        </div>
        <button @click="changekey">动态改变key</button>

        <button ref="btn" @[event]="dosomething">动态事件类型</button>



        <div class="box1" :[bar]="value">44444444</div>

        <!-- v-bind  的缩写 -->
        <!-- 完整语法 -->
        <!-- <a v-bind:href="url">...</a> -->

        <!-- 缩写 -->
        <!-- <a :href="url">...</a> -->

        <!-- 动态参数的缩写 (2.6.0+) -->
        <!-- <a :[key]="url"> ... </a> -->

        <!-- v-on 缩写 -->
        <!-- 完整语法 -->
        <!-- <a v-on:click="doSomething">...</a> -->

        <!-- 缩写 -->
        <!-- <a @click="doSomething">...</a> -->

        <!-- 动态参数的缩写 (2.6.0+) -->
        <!-- <a @[event]="doSomething"> ... </a> -->

    </div>




    <script>




        new Vue({
            el: '#app',
            data: {
                id: 10,
                ma: 'title',
                titlevalue: '鼠标移动到文字上面，的提示',
                event: 'click',
                bar: 'maid',
                value: '妈哟'

            },
            created() {

            },
            mounted() {
                // 给一个元素绑定多个事件
                console.log(document.querySelector('#list-10'));
                let btn = this.$refs.btn
                btn.addEventListener('click', function () {
                    console.log('动态事件类型-btn元素单击');
                })
                btn.addEventListener('dblclick', function () {
                    console.log('动态事件类型-btn元素双击');
                })
            },
            methods: {

                changekey() {
                    this.ma = 'name'
                },
                dosomething(e) {
                    // console.log(e,'点击事件');
                }


            }


        })
    </script>
</body>

</html>